<template>
  <div class="home">
    <div class="btn">
      <el-button type="primary" @click="start">开始</el-button>
      <el-button type="primary" @click="pause">暂停</el-button>
    </div>
    <div class="box">
      <div class="item fangkuai" v-for="(item,index) in fangkuai" :key="`key1${index}`" :style="{'--line':(item.line-1)*10+'px','--sort':(item.sort-1)*10+'px'}"></div>
      <div class="item" v-for="(item,index) in fangkuaiList" :key="`key2${index}`" :style="{'--line':(item.line-1)*10+'px','--sort':(item.sort-1)*10+'px'}"></div>
    </div>
  </div>
</template>

<script>
import {cloneDeep} from 'lodash'
export default {
  data(){
    return{
      // 移动表示
      moveFlag:false,
      timer:null,//定时器
      fangkuai:[],
      fangkuaiList:[],
      firstList:[
        // 田字
        [[{line:1,sort:19},{line:1,sort:20},{line:2,sort:19},{line:2,sort:20}]],
        // 之字
        [
          [{line:1,sort:20},{line:2,sort:19},{line:2,sort:20},{line:3,sort:19}],
          [{line:1,sort:18},{line:1,sort:19},{line:2,sort:19},{line:2,sort:20}],
        ],
        // 反之字
        [
          [{line:1,sort:19},{line:2,sort:19},{line:2,sort:20},{line:3,sort:20}],
          [{line:2,sort:20},{line:2,sort:21},{line:3,sort:19},{line:3,sort:20}]
        ],
        // 反7字
        [
          [{line:1,sort:19},{line:1,sort:20},{line:2,sort:19},{line:3,sort:19}],
          [{line:1,sort:19},{line:1,sort:20},{line:1,sort:21},{line:2,sort:21}],
          [{line:1,sort:21},{line:2,sort:21},{line:3,sort:20},{line:3,sort:21}],
          [{line:2,sort:19},{line:3,sort:19},{line:3,sort:20},{line:3,sort:21}]
        ],
        // 7字
        [
          [{line:1,sort:20},{line:1,sort:21},{line:2,sort:21},{line:3,sort:21}],
          [{line:2,sort:21},{line:3,sort:19},{line:3,sort:20},{line:3,sort:21}],
          [{line:1,sort:19},{line:2,sort:19},{line:3,sort:19},{line:3,sort:20}],
          [{line:1,sort:19},{line:1,sort:20},{line:1,sort:21},{line:2,sort:19}],
        ],
        //一字
        [
          [{line:1,sort:19},{line:1,sort:20},{line:1,sort:21},{line:1,sort:22}],
          [{line:1,sort:20},{line:2,sort:20},{line:3,sort:20},{line:4,sort:20}]
        ],
        // t字
        [
          [{line:1,sort:20},{line:2,sort:19},{line:2,sort:20},{line:2,sort:21}],
          [{line:1,sort:19},{line:2,sort:19},{line:2,sort:20},{line:3,sort:19}],
          [{line:1,sort:19},{line:1,sort:20},{line:1,sort:21},{line:2,sort:20}],
          [{line:1,sort:21},{line:2,sort:21},{line:2,sort:20},{line:3,sort:21}]
        ],
        // 反t字
        [
          [{line:1,sort:19},{line:1,sort:20},{line:1,sort:21},{line:2,sort:20}],
          [{line:1,sort:21},{line:2,sort:20},{line:2,sort:21},{line:3,sort:21}],
          [{line:2,sort:20},{line:3,sort:19},{line:3,sort:20},{line:3,sort:21}],
          [{line:1,sort:19},{line:2,sort:19},{line:2,sort:20},{line:3,sort:19}]
        ],
      ],
      currentFangkuaiList:[],
      currentFangkuaiIndex:0,
      testList:[{"line":60,"sort":39},{"line":60,"sort":37},{"line":60,"sort":38},{"line":60,"sort":5},{"line":60,"sort":35},{"line":60,"sort":36},{"line":60,"sort":10},{"line":60,"sort":11},{"line":60,"sort":12},{"line":60,"sort":13},{"line":60,"sort":17},{"line":60,"sort":18},{"line":60,"sort":19},{"line":60,"sort":21},{"line":60,"sort":24},{"line":60,"sort":32},{"line":58,"sort":40},{"line":59,"sort":40},{"line":59,"sort":39},{"line":60,"sort":40},{"line":59,"sort":1},{"line":59,"sort":2},{"line":60,"sort":1},{"line":60,"sort":2},{"line":59,"sort":21},{"line":59,"sort":22},{"line":60,"sort":22},{"line":60,"sort":23},{"line":59,"sort":16},{"line":59,"sort":17},{"line":60,"sort":15},{"line":60,"sort":16},{"line":58,"sort":3},{"line":59,"sort":3},{"line":60,"sort":3},{"line":60,"sort":4},{"line":59,"sort":8},{"line":60,"sort":7},{"line":60,"sort":8},{"line":60,"sort":9},{"line":58,"sort":7},{"line":59,"sort":6},{"line":59,"sort":7},{"line":60,"sort":6},{"line":58,"sort":20},{"line":59,"sort":20},{"line":59,"sort":19},{"line":60,"sort":20},{"line":59,"sort":33},{"line":59,"sort":34},{"line":60,"sort":33},{"line":60,"sort":34},{"line":59,"sort":27},{"line":60,"sort":25},{"line":60,"sort":26},{"line":60,"sort":27},{"line":59,"sort":28},{"line":59,"sort":29},{"line":60,"sort":28},{"line":60,"sort":29},{"line":59,"sort":13},{"line":59,"sort":14},{"line":59,"sort":15},{"line":60,"sort":14},{"line":58,"sort":25},{"line":59,"sort":24},{"line":59,"sort":25},{"line":59,"sort":26},{"line":58,"sort":22},{"line":58,"sort":23},{"line":58,"sort":24},{"line":59,"sort":23},{"line":58,"sort":17},{"line":58,"sort":18},{"line":58,"sort":19},{"line":59,"sort":18}]
    }
  },
  mounted(){
    // this.move();
    window.addEventListener('keydown',this.handlerKeydown);
    setTimeout(()=>{
      this.fangkuaiList = this.testList;
    },1000)
  },
  watch:{
    fangkuai:{
      immediate:true,
      deep:true,
      handler(newVal){
        if(this.isReStart(newVal,this.fangkuaiList)){
          this.fangkuaiList.push(...this.fangkuai);
          this.pause();
          this.start();
        }
      }
    },
    fangkuaiList:{
      immediate:true,
      deep:true,
      handler(newVal,oldVal){
        console.log('newVal,oldVal',newVal,oldVal);
        if(oldVal&&newVal.length>=oldVal.length){
          this.fangkuaiList=this.clearFangKuai(newVal);
          // this.$set(this,'fangkuaiList',this.clearFangKuai(newVal))
        }
      }
    }
  },
  methods:{
    // 开始
    start(){
      if(this.timer) return;
      this.currentFangkuaiList = cloneDeep(this.firstList[this.getRandomNumber(7)]);
      this.currentFangkuaiIndex = this.currentFangkuaiList.length-1;
      this.fangkuai = cloneDeep(this.currentFangkuaiList[this.currentFangkuaiIndex]);
      this.timer=window.setInterval(()=>{
        if(!this.moveFlag){
          this.move('line',1);
        }
      },500)
    },
    // 暂停
    pause(){
      window.clearInterval(this.timer);
      this.timer = null;
    },
    handlerKeydown(e){
      if(e.keyCode===37){
        // 左移
        this.move('sort',-1);
      }else if(e.keyCode===39){
        // 右移 
        this.move('sort',1);
      }else if(e.keyCode===40){
        // 下移
        this.down()
      }else if(e.keyCode===13){
        // enter
        this.turnD()
      }
    },
    // 移动
    move(filed,num){
      this.moveFlag = true;
      // 触碰到边界不能再移动
      if(this.fangkuai.find(item=>(item.sort===1&&num<0)||(item.sort===40&&filed=='sort'&&num>0))){
        this.moveFlag = false;
        return
      } 
      // 碰到其他方块
      let nextFiledList = this.fangkuai.map(item=>({...item,[filed]:item[filed]+num}))
      let flag = true;
      this.fangkuaiList.forEach(item=>{
        nextFiledList.forEach(ele=>{
          if(ele.sort===item.sort&&ele.line===item.line){
            flag  = false;
          }
        })
      })
      if(!flag) {
        this.moveFlag = false;
        return 
      } 
      this.fangkuai.forEach(item=>{
        item[filed]+=num;
      })
      this.currentFangkuaiList.forEach(item=>{
        item.forEach(ele=>{
          ele[filed]+=num;
        })
      })
      this.moveFlag = false;
    },
    // 直接下落
    down(){
      while(!this.isReStart(this.fangkuai,this.fangkuaiList)){
        this.move('line',1);
      }
    },
    // 转换方向
    turnD(){
      if(this.currentFangkuaiList.find(item=>item.find(i=>i.sort<1))){
        let maxNum = 1;
        this.currentFangkuaiList.forEach(item=>{
          item.forEach(i=>{
            maxNum = 1 - i.sort>maxNum?1 - i.sort:maxNum;
          })
        })
        this.currentFangkuaiList.forEach(item=>{
          item.forEach(i=>{
            i.sort += maxNum;
          })
        })
      }
      if(this.currentFangkuaiList.find(item=>item.find(i=>i.sort>40))){
        let maxNum = 1;
        this.currentFangkuaiList.forEach(item=>{
          item.forEach(i=>{
            maxNum = i.sort-40>maxNum?i.sort-40:maxNum;
          })
        })
        this.currentFangkuaiList.forEach(item=>{
          item.forEach(i=>{
            i.sort -= maxNum;
          })
        })
      }
      if(this.currentFangkuaiList.length>0&&this.currentFangkuaiIndex<=this.currentFangkuaiList.length-1){
        if(this.currentFangkuaiIndex===this.currentFangkuaiList.length-1){
          this.currentFangkuaiIndex = 0;
          this.fangkuai = cloneDeep(this.currentFangkuaiList[0]);
        }else{
          this.currentFangkuaiIndex++;
          this.fangkuai = cloneDeep(this.currentFangkuaiList[this.currentFangkuaiIndex]);
        }
      }
    },
    // 获取随机数
    getRandomNumber(max){
      let num = Math.floor(Math.random()*(max+1))
      return num;
    },
    // 判断是否需要到底
    isReStart(list,allList){
      let flag = false;
      list.forEach(item=>{
        if(item.line===60||allList.find(ele=>ele.line===item.line+1&&item.sort===ele.sort)){
          flag = true
        }
      })
      return flag
    },
    // 清除方块
    clearFangKuai(list){
      // 所有行的格子个数
      let lineMap = {};
      //要清除的行
      let clearLineList = [];
      list.forEach(item=>{
        if(!lineMap[item.line]){
          lineMap[item.line] = 1;
        }else{
          lineMap[item.line]++
        }
      })
      for(let key in lineMap){
        if(lineMap[key]>=40){
          clearLineList.push(+key);
        }
      }
      if(clearLineList.length>0){
        list = list.filter(ele=>!clearLineList.includes(ele.line))
        list.forEach(item=>{
          clearLineList.forEach(ele=>{
            if(item.line<ele){
              item.line++
            }
          })
        })
      }
      return list;
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 400px;
  height: 600px;
  margin: auto;
  background: #FFFFFF;
}
.item{
  position: absolute;
  top:var(--line);
  left:var(--sort);
  width: 8px;
  height: 8px;
  background: black;
  border:1px solid #FFFFFF;
  &.fangkuai{
    &:first-of-type{
      &::after{
        content: '';
        display: block;
        position: fixed;
        top:0;
        bottom: 0;
        border-left:1px solid rgba(169, 166, 166,.2)
      }
    }
  }
}
</style>
